<template>
    <div>
        <el-row style="min-width:150px">
            <el-checkbox v-model="state.strictMode">包含下级部门</el-checkbox>
            <el-tooltip class="box-item box-item1" effect="dark" content="新增部门" placement="top-start" v-if="props.showEdit">
                <el-button link size="default" type="primary" @click="createOrg('create')" class="create-btn">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </el-row>
        <!-- <el-button link size="small" type="primary" @click="() => { state.expandAll = !state.expandAll }">
            <el-icon>
                <ele-FolderRemove v-if="state.expandAll" />
                <ele-FolderAdd v-else />
            </el-icon>
        </el-button> -->
        <el-tree :data="props.treeData" :props="props.treeProps" show-checkbox :highlight-current="true"
            :node-key="props.treeProps?.code" @check="selectedNodeKeys" :check-strictly="!state.strictMode" border
            :default-expand-all="state.expandAll" :expand-on-click-node="false">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-tooltip class="box-item" effect="dark" content="修改部门" placement="top-start">
                            <el-button link size="small" type="primary" v-if="props.showEdit"
                                @click="() => { editOrg(data) }">
                                <el-icon>
                                    <ele-Edit />
                                </el-icon>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="新增下级部门" placement="top-start">
                            <el-button link size="small" type="primary" v-if="props.showEdit"
                                @click="() => { createOrg(data) }">
                                <el-icon>
                                    <ele-Plus />
                                </el-icon>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="删除部门" placement="top-start">
                            <el-button v-if="data.notDel !== 1 && data.children === null && props.showEdit" link
                                size="small" type="danger" @click="() => { deleteOrg(data) }">
                                <el-icon>
                                    <ele-Delete />
                                </el-icon>
                            </el-button>
                        </el-tooltip>
                    </span>
                </span>
            </template>
        </el-tree>

        <!-- <el-tree ref="treeRef" show-checkbox :load="loadNode" lazy node-key="code" :props="state.treeProps"
			:expand-on-click-node="false" check-strictly="false">
			<template #default="{ node, data }">
				<span class="custom-tree-node">
					<span>{{ node.label }}</span>
					<el-button text size="small" @click="relSection(data.code)" type="primary"> 关联 </el-button>
					<el-button text size="small" type="danger" @click="deleteSection(data.code)"> 移除 </el-button>
				</span>
			</template>
		</el-tree> -->
    </div>
    <dia-log ref="dialogRef"></dia-log>
</template>

<script setup lang="ts" name="index">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref, inject, onMounted } from 'vue';
import diaLog from './dialog.vue';
import { useIdDeleteApi } from '/@/api';

// 接受父组件传值
const props = defineProps({
    treeData: {
        type: Array,
        default: () => []
    },
    checkOrgTreeData: {
        type: Array,
        default: () => []
    },
    treeProps: {
        type: Object,
        dafault: () => ({
            key: 'code',
            label: 'label',
            id: 0,
            notDel: 0,
            children: 'children'
        })
    },
    showEdit: {
        type: Boolean,
        default: () => true
    }
})

// 接收父组件传递的方法
const getTreeMenus: any = inject('getTreeMenus')

// 传递方法给父组件
const emits = defineEmits(['selectedCode'])

// 定义变量内容
const dialogRef = ref<RefType>()
const urlStr = '/person/org'
const state = reactive({
    strictMode: false,
    expandAll: true,
})

// 选择列表更新数据
const selectedNodeKeys = (_checkedNodes: any, checkedKeys: { code: string, checkedNodes: any[] }, _halfCheckedNodes: any, _halfCheckedKeys: any) => {
    const arrResult = [] as string[]
    checkedKeys?.checkedNodes?.forEach((element: { code: string; }) => {
        arrResult.push(element.code)
    });
    console.log(props.treeData, '111')
    emits('selectedCode', arrResult)
}

// 创建新部门
const createOrg = (param: any) => {
    if (param.parentCodes === null) {
        param.parentCodes = Object.assign([])
    }
    dialogRef.value.openDialog('create', urlStr, param.id, param.parentCodes?.concat(param.code))
}

// 删除部门
const deleteOrg = (param: any) => {
    ElMessageBox.confirm(
        '是否删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '返回',
            type: 'warning',
        }
    ).then(() => {
        useIdDeleteApi(urlStr, param.id).then((res) => {
            ElMessage.success('删除成功')
            getTreeMenus()
        })
    })
}

// 修改部门
const editOrg = (param: any) => {
    dialogRef.value.openDialog('edit', urlStr, param.id)
}
onMounted(() => {
    console.log(props, '进入部门组件')
})

// const loadNode = (node: any, resolve: (data: any) => void) => {
//     if (node.level === 0) {
//         useAccessAreaChildrenApi('').then(({ content }) => {
//             return resolve(content)
//         })
//     } else {
//         useAccessAreaChildrenApi(node.data.code).then(({ content }) => {
//             state.treeData = content
//             return resolve(content)
//         })
//     }
// }
</script>

<style scoped lang="scss">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.create-btn {
    margin-left: 10px;
}
</style>


